<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="box">
    <p>
      <label for="">用户名:</label>
      <input type="text" id="user">
      <span id="user_span"></span>
    </p>
    <p>
      <label for="">密&emsp;码:</label>
      <input type="text" id="pwd">
      <span id="pwd_span"></span>
    </p>
    <p>
      <label for="">确&emsp;认:</label>
      <input type="text" id="repwd">
      <span id="repwd_span"></span>
    </p>
    <p>
      <label for="">验证码:</label>
      <input type="text" id="code">
      <span id="createCode">a1b2</span>
      <span id="code_span"></span>
    </p>
    <p>
      <input id="btn" type="submit" value="注册">
    </p>
  </div>
</body>
<script src="./用户名.js"></script>

<script>
  // 用户名
  // 由数字 大小写字母 _ $ 组成 , 6-12位,且不能以数字开头

  // 判断的流程  从易到难的顺序 
  // a. 长度  6-12位 
  // b. 不能以数字开头
  // c. 由数字 大小写字母 _ $ 组成  (所有的字符都必须在合法字符的范围内,只要有一个不是合法的字符 报错   => 判断字符串中是否能含有非法字符)

  var numList = [];
  for (var i = 48; i <= 57; i++) {
    var char = String.fromCharCode(i); //根据编码返回对应的字符
    numList.push(char);
  }
  console.log(numList);

  var smallList = [];
  for (var i = 97; i <= 122; i++) {
    var char = String.fromCharCode(i); //根据编码返回对应的字符
    smallList.push(char);
  }
  console.log(smallList);

  var bigList = [];
  for (var i = 65; i <= 90; i++) {
    var char = String.fromCharCode(i); //根据编码返回对应的字符
    bigList.push(char);
  }
  console.log(bigList);

  var speList = ["_"];// 允许使用的特殊字符的集合

  var normalList = numList.concat(smallList, bigList, speList);
  console.log(normalList);

  function randCode(len) {
    len = len == undefined ? 4 : len;  //默认值(4)

    var list = numList.concat(smallList, bigList);
    var arr = [];
    for (var i = 0; i < len; i++) {  // 假如 i=2时 随机元素重复
      var index = Math.round(Math.random() * (list.length - 1));
      var item = list[index];
      if (arr.indexOf(item) == -1) {  // 不存在  => 放
        arr.push(item);   //把随机的元素放到数组中
      } else { // 存在   => 如果不做任何操作 会少放一次
        //  => 假如 i=2时 随机元素重复 i-- => i=1  本次循环结束  i++ => i=2 (忽略本次,再来一次)
        i--;  // i--   
      }
    }
    console.log(arr);

    return arr.join("");

  }

  //用户名
  var userInp = document.getElementById("user");
  var userSpan = document.getElementById("user_span");
  //密码
  var pwdInp = document.getElementById("pwd");
  var pwdSpan = document.getElementById("pwd_span");
  //确认密码
  var repwdInp = document.getElementById("repwd");
  var repwdSpan = document.getElementById("repwd_span");
  //验证码
  var codeInp = document.getElementById("code");
  var codeSpan = document.getElementById("code_span");
  var createCode = document.getElementById("createCode");
  //注册
  var btn = document.getElementById("btn");

  createCode.innerText = randCode();
  createCode.onclick = function () {
    createCode.innerText = randCode();
  }

  btn.onclick = function () {

    // 用户名
    fn1();

    // 密码
    // 由数字 大小写字母 _    6-12位 

    // 判断密码强度
    // 数字,大写,小写,特殊字符  中 只出现一种   11111   aaaaaa  AAAAAA   弱
    // 数字,大写,小写,特殊字符  中 出现2种      11111a  a1111   aAAAAA   中
    // 数字,大写,小写,特殊字符  中 出现3种      1aA                      强
    // 数字,大写,小写,特殊字符  中 出现4种      1aA_                     超强

    // 是否存在数字  / 大写 /小写 / 特殊字符

    // true + true + true + false  => 3
    var pwd = pwdInp.value;//密码表单元素的取值(字符串)
    console.log(pwd);
    var repwd = repwdInp.value;
    console.log(repwd);
    var code = codeInp.value;
    console.log(code);


    // isPwdright 表状态 => 密码是否正确
    var isPwdright = false; // 默认密码不正确

    if (pwd.length >= 6 && pwd.length <= 12) {
      // pwdSpan.innerText = '√';
      // pwdSpan.style.fontSize = '12px';
      // pwdSpan.style.color = 'green';

      var flag = true; //假设全都是合法的  => 只要找到一个非法的的即可以推翻假设
      for (var i = 0; i < pwd.length; i++) {
        var char = pwd.charAt(i); //遍历得到每一个字符
        if (normalList.indexOf(char) == -1) {// 不在normalList中就是非法的
          flag = false;
          break;
        }
      }

      if (flag) { //flag ==true
        var numFlag = false;
        var smallFlag = false;
        var bigFlag = false;
        var speFlag = false;
        for (var char of pwd) {
          if (numList.indexOf(char) != -1) {
            numFlag = true;
          }
          if (smallList.indexOf(char) != -1) {
            smallFlag = true;
          }
          if (bigList.indexOf(char) != -1) {
            bigFlag = true;
          }
          if (speList.indexOf(char) != -1) {
            numFlag = true;
          }
        }
        var sum = numFlag + smallFlag + bigFlag + speFlag;
        console.log(sum);
        switch (sum) {
          case 1:
            pwdSpan.innerHTML = '弱';
            pwdSpan.style.color = 'red'
            break;
          case 2:
            pwdSpan.innerHTML = '中';
            pwdSpan.style.color = 'orange'
            break;
          case 3:
            pwdSpan.innerHTML = '强';
            pwdSpan.style.color = 'yellow'
            break;
          case 4:
            pwdSpan.innerHTML = '超强';
            pwdSpan.style.color = 'green'
            break;

        }
        pwdSpan.style.fontSize = '12px'

        isPwdright = true;

      } else {
        pwdSpan.innerText = "用户名由数字,大小写字母,下划线组成";
        pwdSpan.style.fontSize = "12px";
        pwdSpan.style.color = "red";
      }

    } else {
      pwdSpan.innerText = "用户名需要在6-12位之间";
      pwdSpan.style.fontSize = "12px";
      pwdSpan.style.color = "red";
    }

    //确认密码

    if (isPwdright) {
      if (pwd == repwd) {
        repwdSpan.innerText = "√";
        repwdSpan.style.fontSize = "12px";
        repwdSpan.style.color = "green";
      } else {
        repwdSpan.innerText = "两次密码输入不一致";
        repwdSpan.style.fontSize = "12px";
        repwdSpan.style.color = "red";
      }
    } else {
      repwdSpan.innerText = "密码格式有误,请先修改密码";
      repwdSpan.style.fontSize = "12px";
      repwdSpan.style.color = "red";
    }

    //验证码
    // 判断用户输入的验证码(code) 和 随机的验证码(createCode.innerText) 是否一直
    // 如果不区分大小写 => 统一转小写 在判断
    if (code) {  //验证码中有内容  等价于code!=""
      if (code.toLowerCase() == createCode.innerText.toLowerCase()) {
        codeSpan.innerText = "√";
        codeSpan.style.fontSize = "12px";
        codeSpan.style.color = "green";
      } else {
        codeSpan.innerText = "验证码不一致";
        codeSpan.style.fontSize = "12px";
        codeSpan.style.color = "red";
      }
    } else {
      codeSpan.innerText = "请先输入验证码";
      codeSpan.style.fontSize = "12px";
      codeSpan.style.color = "red";
    }


  }




  // 密码
  // 由数字 大小写字母 _    6-12位 

  // 判断密码强度
  // 数字,大写,小写,特殊字符  中 只出现一种   11111   aaaaaa  AAAAAA   弱
  // 数字,大写,小写,特殊字符  中 出现2种      11111a  a1111   aAAAAA   中
  // 数字,大写,小写,特殊字符  中 出现3种      1aA                      强
  // 数字,大写,小写,特殊字符  中 出现4种      1aA_                     超强

  // 是否存在数字  / 大写 /小写 / 特殊字符

  // true + true + true + false  => 3 

  // 确认密码  
  // 和密码相同  

  // 验证码  => 封装一个方法可以随机生成四位验证码 (0-9 a-z A-Z )
  // 1. 页面加载时,随机生成四个不重复的验证码 (0-9 a-z A-Z )   => createCode
  // 2. 点击 验证码 进行切换
  // 3. 验证码输入判断  (输入的  随机生成的  保持一致) 






</script>

</html>